import React from 'react';
import { Row, Col, Card, Statistic, Button, Typography, Space } from 'antd';
import { 
  UploadOutlined, BranchesOutlined, 
  ApartmentOutlined, LineChartOutlined, 
  FundOutlined, FileTextOutlined 
} from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Title, Paragraph } = Typography;

const Home = () => {
  const navigate = useNavigate();
  
  const navigateTo = (path) => {
    navigate(path);
  };
  
  return (
    <div>
      <Title level={2}>智能诊断系统</Title>
      <Paragraph>
        欢迎使用华泰智能诊断系统，这是一个用于工业过程数据分析的平台，提供多种高级分析方法来帮助您诊断系统故障。
      </Paragraph>
      
      <Row gutter={[16, 16]} style={{ marginTop: '24px' }}>
        <Col span={24}>
          <Card title="开始使用" bordered={false}>
            <Space direction="vertical" size="large" style={{ width: '100%' }}>
              <Paragraph>
                选择下方任一分析方法开始，或先上传数据文件：
              </Paragraph>
              
              <Button 
                type="primary" 
                icon={<UploadOutlined />} 
                size="large"
                onClick={() => navigateTo('/upload')}
              >
                上传数据
              </Button>
            </Space>
          </Card>
        </Col>
      </Row>
      
      <Row gutter={[16, 16]} style={{ marginTop: '24px' }}>
        <Col xs={24} sm={12} md={12} lg={6} xl={6}>
          <Card 
            hoverable
            onClick={() => navigateTo('/ica')}
          >
            <Statistic 
              title="独立成分分析 (ICA)" 
              value="ICA" 
              prefix={<BranchesOutlined style={{ color: '#1890ff' }} />} 
            />
            <Paragraph style={{ marginTop: '16px' }}>
              用于分离混合信号，特别适用于线性混合模型的盲源分离。
            </Paragraph>
          </Card>
        </Col>
        
        <Col xs={24} sm={12} md={12} lg={6} xl={6}>
          <Card 
            hoverable
            onClick={() => navigateTo('/ae')}
          >
            <Statistic 
              title="自动编码器 (AE)" 
              value="AE" 
              prefix={<ApartmentOutlined style={{ color: '#52c41a' }} />} 
            />
            <Paragraph style={{ marginTop: '16px' }}>
              基于神经网络的降维方法，能够处理复杂的非线性关系。
            </Paragraph>
          </Card>
        </Col>
        
        <Col xs={24} sm={12} md={12} lg={6} xl={6}>
          <Card 
            hoverable
            onClick={() => navigateTo('/pca')}
          >
            <Statistic 
              title="主成分分析 (PCA)" 
              value="PCA" 
              prefix={<LineChartOutlined style={{ color: '#faad14' }} />} 
            />
            <Paragraph style={{ marginTop: '16px' }}>
              经典的线性降维方法，用于找出数据中的主要变化方向。
            </Paragraph>
          </Card>
        </Col>
        
        <Col xs={24} sm={12} md={12} lg={6} xl={6}>
          <Card 
            hoverable
            onClick={() => navigateTo('/pls')}
          >
            <Statistic 
              title="偏最小二乘分析 (PLS)" 
              value="PLS" 
              prefix={<FundOutlined style={{ color: '#f5222d' }} />} 
            />
            <Paragraph style={{ marginTop: '16px' }}>
              用于建立预测模型，特别适用于自变量之间存在多重共线性的情况。
            </Paragraph>
          </Card>
        </Col>
      </Row>
      
      <Row gutter={[16, 16]} style={{ marginTop: '24px' }}>
        <Col span={24}>
          <Card title="系统功能" bordered={false}>
            <Row gutter={[16, 16]}>
              <Col xs={24} sm={12} md={8}>
                <Card type="inner" title="数据导入与预处理">
                  <ul style={{ paddingLeft: '20px' }}>
                    <li>支持Excel和CSV格式数据</li>
                    <li>自动数据清洗和标准化</li>
                    <li>缺失值处理</li>
                    <li>异常值检测</li>
                  </ul>
                </Card>
              </Col>
              
              <Col xs={24} sm={12} md={8}>
                <Card type="inner" title="分析与建模">
                  <ul style={{ paddingLeft: '20px' }}>
                    <li>多种高级数据分析方法</li>
                    <li>模型参数自动优化</li>
                    <li>可视化模型训练过程</li>
                    <li>模型解释与评估</li>
                  </ul>
                </Card>
              </Col>
              
              <Col xs={24} sm={12} md={8}>
                <Card type="inner" title="故障诊断">
                  <ul style={{ paddingLeft: '20px' }}>
                    <li>故障检测与定位</li>
                    <li>贡献图分析</li>
                    <li>自动诊断报告生成</li>
                    <li>历史数据对比分析</li>
                  </ul>
                </Card>
              </Col>
            </Row>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Home; 